<template>
	<view class="Groupchang">
		<view>
			<view class="header">
				预约场馆
			</view>
			<view class="addSelect">
				<view>
					<view class="iconfont icon-dingwei"></view>
					<picker @change="fromChange" :value="index" :range="array">
						<view>
							<view>{{array[index]}}</view>
						</view>
					</picker>
				</view>
				<text class="iconfont icon-jiantouxia "></text>
			</view>
		</view>
		<view class="GrounTime">
			<view>
				团课预约时间
			</view>
			<view class="timeYu">
				<view>
					<view v-for="v in myweek">
						{{v}}
					</view>
				</view>
				<view>
					<view v-for="(v,i) in myday" @click="timeChange(i)" :class="coltype==i?'class_col':''">
						{{v}}
					</view>
				</view>
			</view>
		</view>
		<view class="makeApp">
			<view>
				可预约课程
			</view>
			<view class="course">
				<view class="course_name" @click="changgeDetails(v)" v-for="(v,i) in overData" :key='i'>
					<view>
						<image :src="'/static/image-che/'+v.courseImg" mode=""></image>
					</view>
					<view class="cont_font">
						<view>
							<text>{{v.courseName}}</text>
							<text>爆</text>
						</view>
						<view>
							<view>
								<text>{{v.classTime}}-{{v.classOverTime}}</text>
								<text>教练:{{v.coachName}}</text>
							</view>
							<view>
								<text>{{v.coachType==1?'已约满':'未约满'}}</text>
							</view>
						</view>
						<view>
							<text>预约满{{v.courseMaxnum}}人开课</text>
						</view>
						<view>
							<text>{{v.classintro}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import myRequest from '../../../utils/myRequest.js'
	import store from '../../../store/index.js'
	export default {
		data() {
			return {
				//地址
				array: [],
				index: 0,
				coltype: 1,
				myweek: [],
				myday: [],
				//可预约的课程
				makeCoures: [{
					// couresName:'快速减肥教程训练',
					// couresImage:'../../../static/logo.png',
					// couresTime:'19:00-19:45',
					// couresCoach:'王某',
					// //是否已约满 1是已约满 2是未约满
					// couresType:1,
					// couresMaxNum:'预约满2人开课',
					// couresLabel:[{label:"极速减脂"},{label:"极速增肌"},{label:"心肺考验"},]
				}],
				overData: [],
			}
		},
		methods: {
			//地址选择
			fromChange: function(e) {
				this.index = e.detail.value
				this.queryVen()
			},
			timeChange: function(i) {
				this.coltype = i
				this.queryVen()
			},
			changgeDetails: function(v) {
				uni.navigateTo({
					url: "GroupManag/Groupdetails"
				})
				uni.setStorage({
					key: 'groupId',
					data: v.groupClassId
				})
			   this.makeCoures.forEach(i=>{
				if(v.groupClassId==i.groupClassId){
					this.$store.commit('Group/getDataStorg',i)
				}
			})
			},
			//获取场馆教练课程数据
			getData: function() {
				myRequest({
					url: '/Callcourselist',
				}).then((res) => {
				
					this.makeCoures = res.data.data
				})
			},
			//获取场馆数据
			getVenueData() {
				myRequest({
					url: '/Callgetvenues',
				}).then((res) => {
					res.data.data.forEach((v) => {
						this.array.push(v.venuesName)
					})
					this.queryVen()
				})
			},
			queryVen: function() {
				this.overData = []
				for (let i = 0; i < this.makeCoures.length; i++) {
					if (this.array[this.index] == this.makeCoures[i].venuesName && this.makeCoures[i].dateYMD.slice(8,
							10) == this.myday[this.coltype]) {
						this.overData.push(this.makeCoures[i])
					}
					
				}
			},
		},
		mounted() {
			let today = new Date();
			let myWeek = today.getDay()
			//预约时间
			function getmyDay(day) {
				let today = new Date();
				let targetday_milliseconds = today.getTime() + 1000 * 60 * 60 * 24 * day
				today.setTime(targetday_milliseconds)
				let tDate = today.getDate()
				return tDate
			}
			for (let i = 0; i <= 6; i++) {
				this.myday.push(getmyDay(i))
				if (myWeek < 6) {
					this.myweek.push('周' + '日一二三四五六' [myWeek])
					myWeek++
				} else {
					this.myweek.push('周' + '日一二三四五六' [myWeek])
					myWeek = 0
				}
			}
			this.getData()
			this.getVenueData()
		},
		
	}
</script>

<style lang="less">
	@import url('~@/static/font-li/font2022/iconfont.css');

	.Groupchang {
		padding: 30rpx;
	}

	.header {
		font-size: 40rpx;
	}

	.addSelect {
		margin-top: 15rpx;

	}

	.addSelect {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.addSelect view:first-child {
		margin-right: 10rpx;
		display: flex;
		align-items: center;
	}

	.GrounTime>view:first-child {
		font-size: 35rpx;
		margin-top: 40rpx;
		font-weight: 700;
		margin-left: 20rpx;
		border-left: 4px solid blue;
		padding-left: 10rpx;
	}

	.timeYu>view {
		height: 80rpx;
		display: flex;
		justify-content: space-around;
		align-items: center
	}

	.timeYu>view>view {
		width: 80rpx;
		height: 80rpx;
		text-align: center;
		line-height: 80rpx;
	}

	//选择后的颜色time
	.class_col {
		border-radius: 40rpx;
		background-color: #000000;
		color: #FFFDEF;
	}

	.makeApp>view:first-child {
		font-size: 35rpx;
		margin-top: 40rpx;
	}

	.course_name {
		display: flex;
		border-bottom: 1rpx solid #666666;
		padding-bottom: 25rpx;
		box-sizing: border-box;
		margin-bottom: 20rpx;
	}

	.course {
		margin-top: 25rpx;
	}

	.course_name image {
		width: 200rpx;
		height: 200rpx;
		margin-right: 20rpx;
	}

	.cont_font {
		flex: 1;
	}

	.cont_font view:first-child {
		margin-bottom: 15rpx;
		display: flex;
		justify-content: space-between;
	}

	.cont_font>view:first-child>text:first-child {
		font-size: 35rpx;
		font-weight: bold;
	}

	.cont_font>view:first-child>text:last-child {
		color: #FFFFFF;
		background: red;
		display: inline-block;
		width: 70rpx;
		height: 50rpx;
		text-align: center;
		line-height: 50rpx;
		border-radius: 20rpx;
	}

	.cont_font>view:nth-of-type(2) {
		display: flex;
		margin-bottom: 10rpx;
		justify-content: space-between;
		color: #666666;
	}

	.cont_font>view:nth-of-type(2)>view:first-child>text:first-child {
		margin-right: 20rpx;
	}

	.cont_font>view:nth-of-type(3) {
		margin-bottom: 15rpx;
		color: #666666;
	}

	.cont_font>view:nth-of-type(4) {
		display: flex;
		flex-wrap: wrap;
		align-content: flex-start;
	}

	.cont_font>view:nth-of-type(4) text {
		display: inline-block;
		
		height: 50rpx;
		text-align: center;
		line-height: 50rpx;
		border-radius: 10rpx;
		margin: 10rpx;
		background: #EE9900;
		color: #ffff;
	}
</style>
